Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container{
	width: 100%;
	height: 100vh;
}
.rect{
	width: 43%;
	height: 40vh;
	background: black;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(3000px) rotateY(-50deg) rotateZ(7deg) rotateX(3deg);
	z-index: 1;
}
img:nth-child(1){
	width: 50%;
	height: 100vh;
	position: absolute;
	left: 25%;
}
img:nth-child(2){
	width: 42%;
	height: 40vh;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(3000px) rotateY(-50deg) rotateZ(7deg) rotateX(3deg);
	z-index: 1;
	transition: .5s;
}
img:nth-child(3){
	width: 42%;
	height: 40vh;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(2000px) rotateY(-50deg) rotateZ(7deg) rotateX(4deg);
	z-index: 1;
	transition: .5s;
}
img:nth-child(4){
	width: 43%;
	height: 40vh;
	position: absolute;
	left: 35%;
	top: 18%;
	transform-style: preserve-3d;
	transform: perspective(3000px) rotateY(-50deg) rotateZ(7deg) rotateX(3deg);
	z-index: 1;
	transition: .5s;
}
.images:hover img:nth-child(4){
	transform-style: preserve-3d;
	position: absolute;
	top: 15%;
	transform: perspective(3000px) translateX(-250px) rotateX(3deg) rotateY(-50deg) rotateZ(9deg);
	transition: .5s;
}
.images:hover img:nth-child(3){
	transform-style: preserve-3d;
	position: absolute;
	top: 14%;
	transform: perspective(3000px) translateX(-120px) rotateX(3deg) rotateY(-50deg) rotateZ(9deg);
	transition: .5s;
}

Frontend Forever App